// 考勤审批-首页入口
<template>
  <div class="page">
    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack">
          <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px;margin-left: 10px; transform: rotate(180deg);" />
        </button>
        <h3>考勤审批</h3>
      </div>
      <!-- Tab 切换 -->
      <div class="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab', { active: activeTab === index }]"
          @click="activeTab = index"
        >
          {{ tab }}
        </div>
      </div>
    </div>

    <div class="context">
      <!-- 区域1 -->
      <div class="section section1">
        <div class="text">阳泉D4模组H800集群布线集成服务 - 09/27</div>
        <div class="location">
          <img
            src="@/assets/xiangmujindu/icon_location.png"
            alt="Location"
            class="icon"
          />
          <span :style="{ color: '#9D9E9F' }"
            >考勤地点: 阳泉市开发区白鹭百度云计算中心</span
          >
        </div>
      </div>

      <!-- 区域2 -->
      <div class="section checklist">
        <div class="row">
          <input type="checkbox" v-model="allChecked" @change="toggleAll" />
          <span>全选</span>
        </div>
        <div class="divider"></div>

        <div v-for="(person, index) in people" :key="person + index" class="row">
          <div class="left">
            <input type="checkbox" v-model="checkedList[index]" />
            <span>{{ person.name }}</span>
          </div>
          <span class="middle">{{ person.signIn }}</span>
          <span class="right">{{ person.signOut }}</span>
           <div class="right-div">
            <span
              class="right_1"
              :style="{ visibility: isHidden ? 'hidden' : '' }"
              >{{ person.signSucc }}</span
            >
            <span
              class="right_2"
              :style="{ visibility: isHidden ? 'hidden' : '' }"
              >{{ person.signFail }}</span
            >
          </div>

          <div class="divider" v-if="index < people.length - 1"></div>
        </div>
      </div>

      <!-- 区域4 -->
      <div class="section actions">
        <button class="btn reject" @click="refuse">拒绝</button>
        <button class="btn approve" @click="sign">通过</button>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      allChecked: false, // 控制“全部”复选框状态
      checkedList: [false, false, false], // 控制每一行复选框状态
      checkedList: [false, false, false],
      people: [
        {
          name: "马燕",
          signIn: "签到: 09:10",
          signOut: "签退: 17:10",
          signSucc: "", // 审核通过
          signFail: "",
        },
        {
          name: "张世英",
          signIn: "签到: 09:05",
          signOut: "签退: 17:06",
          signSucc: "", // 审核通过
          signFail: "",
        },
        {
          name: "李恒",
          signIn: "签到: 09:12",
          signOut: "签到: 09:12",
          signSucc: "",
          signFail: "", // 审核失败
        },
      ],
      isHidden: true,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    toggleAll() {
      this.checkedList = this.checkedList.map(() => this.allChecked);
    },
    watchCheckedList() {
      this.allChecked = this.checkedList.every((checked) => checked);
    },
    // 通过
    sign() {
      this.isHidden = false;
      this.checkedList.map((item, index) => {
        if (item) {
          this.people[index].signSucc = '审核通过'
          this.people[index].signFail = ''
        }
      })
    },
    refuse () {
      this.isHidden = false;
      this.checkedList.map((item, index) => {
        if (item) {
          this.people[index].signSucc = ''
          this.people[index].signFail = '审核拒绝'
        }
      })
    }
  },
  watch: {
    checkedList: "watchCheckedList",
  },
};
</script>


<style scoped>
html {
  height: 100%;
  background: #f4f5f9;
}
body {
  margin: 0px;

  background-color: #f4f5f9;
}
.page {
  font-size: 13px;
  box-sizing: border-box;
  background: #f4f5f9;
  height:100%；
}

.context {
  font-size: 13px;
  padding: 10px;
  height: 100%;
  color: #474747;
}

/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
  left: -1em;

  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

.context {
  font-size: 13px;
  padding: 10px;
  height: 100%;
}

/* 公共样式 */
.section {
  background-color: white;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

/* 区域1样式 */
.section1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 11px;
}

.section3 {
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.text {
  font-weight: bold;
}
.location {
  display: flex;
  align-items: center;
}
.icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

/* 区域2样式 */

.checklist {
  background: #fbfcff;
  /* border-radius: 10px; */
}

.checklist .row {
  display: flex;
  align-items: center;
  padding: 14px 10px;
  
}
.left {
  display: flex;
  align-items: center;
  width: 85px;
}
.middle,
.right {
  flex: 1;
  /* text-align: center; */
  color: #9d9e9f;
}

.right-div{
  width:55px;
}

.right_1 {
  color: #7e9b4f;
  visibility: hi;
}

.right_2 {
  color: #E43A10;
  visibility: hi;
}

.right_1_visible {
  visibility: hidd;
}

/* 区域3样式 */
.actions {
  display: flex;
  justify-content: space-between;
  background: none;
  margin-top: 10px;
}
.btn {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.btn.reject {
  background-color: #f4f5f9;
  border: 1px solid #98c355;
  color: #98c355;
  margin: 5px;
}
.btn.approve {
  background-color: #98c355;
  color: white;
  border: none;
  margin: 5px;
}

/* 区域3样式 */
.section3 {
  display: flex;
  justify-content: space-between;
}
.btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.btn.reject {
  background-color: #f4f5f9;
  border: 1px solid #98c355;
  color: #98c355;
  margin:5px;
}
.btn.approve {
  background-color: #98c355;
  color: white;
  margin-left: 5px;
    margin:5px;
}
</style>

